<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>父组件：{{title}}</h1>

        <com></com>
    </div>
</body>
<script>


    const com = {
        template: `<h1> 
            {{msg}} 
            <button @click='getApp' >点击获取父组件</button>    
        </h1>`,
        data() {
            return {
                msg: '你好世界'
            }
        },
        methods: {
            getApp() {
                // this.$parent 获取到父组件的实例，也可以获取到父组件的父组件。
                // console.log(this.$parent.$parent);

                // 可以修改父组件中的数据
                this.$parent.title = '像春天花一样'

                // this.$root 用来获取根组件用的
                console.log(this.$root);
            }
        }
    }


    const app = {
        data() {
            return {
                title: '你笑起来真好看'
            }
        },
        methods: {},
        components: {
            com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>